<template>
    <div class="retrospect">
        <Search @searchAll="search" :isSearchAll="true"></Search>
        <div class="content">
            <vue-better-scroll
                class="wrapper"
                ref="scrollqq"
                :scrollbar="scrollbarObj"
                :pullDownRefresh="pullDownRefreshObj"
                :pullUpLoad="pullUpLoadObj"
                :startY='parseInt(startY)'
                @pullingUp="onPullingUp"
                > 
                <noData v-if="!accpentlist.length"></noData>
                <div v-for="(item, index) in accpentlist" :key="index" class="item" @click="$router.push(`/trace?id=${item.EmployeeId}&type=${$route.query.type}`)">
                    <div class="left-content">
                        <div class="head-img" v-if="item.EmployeeImage">
                                <img  :src="item.EmployeeImage" alt="">
                        </div>
                        <div class="head-img" v-else>
                                <img v-if="item.Gender=='男'" src="../../assets/avatar2.png" alt="">
                                <img v-if="item.Gender=='女'" src="../../assets/avatar3.png" alt="">
                        </div>
                        <div class="head-info">
                            <h3>{{item.DisplayName}}</h3>
                            <p>{{item.Age}} | {{item.EmployeeType}}</p>
                        </div>
                    </div>
                    <div class="right-content">
                        <!-- <p class="date">2020-02-23</p> -->
                        <!-- <p class="trace" @click="$router.push(`/trace?id=${item.EmployeeId}`)">疫情追溯</p> -->
                        <x-icon type="ios-arrow-right" size="30" style="fill:#999"></x-icon>
                    </div>
                </div>
            </vue-better-scroll>
        </div>
        <addMenu @add="add" v-if="isCanEdit"></addMenu>
        <myMenu backPath="/epidemicFKEntery"></myMenu>
        <!-- <myMenu></myMenu> -->
        <!-- <div class="tips">已追溯: {{yqzsInfo.Total1?yqzsInfo.Total1:0}}人 | 未追溯: {{yqzsInfo.Total2?yqzsInfo.Total2:0}}人</div> -->
    </div>
</template>

<script>
import Search from '@commonComponents/search'
import VueBetterScroll from "vue2-better-scroll"
import myMenu from '@/commonComponents/menu'
import addMenu from '@/commonComponents/addmenu'
import { Tab, TabItem } from 'vux'
export default {
    name: 'retrospect',
    data () {
        return {
            scrollbarObj: {fade: true},
            pullDownRefreshObj: false,
            pullUpLoadObj: {
                threshold: 0,
                txt: {
                    more: '加载更多',
                    noMore: '没有更多数据了'
                }
            },
            startY: 0,
            scrollToX: 0,
            scrollToY: 0,
            scrollToTime: 700,
            params: {
                pageSize: 10,
                pageIndex: 1,
                employeeType: '管理人员',
                name: '',
                deptid: ''
            },
            pageIndex: 0,
            totalCount: 0,
            accpentlist: [],
            userInfo: {}, // 用户信息
            isMiniprogram: true, // 是否是在小程序中
            yqzsInfo: {},
            isCanEdit: false, // 用户是否可编辑
            addPath: '' // 新增路径,默认为空
        }
    },
    components: {
        Tab,
        TabItem,
        Search,
        VueBetterScroll,
        myMenu,
        addMenu
    },
    methods: {
        getData () {
            this.$vux.loading.show({
                text: '加载中...'
            })
            this.$axiosAjax.GetRetroList(this.params).then(res => {
                console.log(res);
                if (res.status == 200) {
                    let relist = res.data.Data;
                    this.accpentlist = this.accpentlist.concat(relist);
                    let totalAllCount = res.data.Total;
                    let resultCount = this.accpentlist.length;
                    if (parseInt(resultCount) < parseInt(totalAllCount)) {
                        this.$refs['scrollqq'].forceUpdate(true);
                    } else {
                        this.$refs['scrollqq'].forceUpdate(false);
                    }
                }
            }).finally(() => {
                this.$vux.loading.hide()
            })
        },
        onPullingUp () {
            this.params.pageIndex++;
            this.getData();
        },
        search (item) {
            this.params.name = item.name
            if (item.deptId) {
                this.params.deptid = item.deptId
            } else {
                this.params.deptid = this.userInfo.departId
            }
            this.params.inoutType = item.employeeStatus
            this.params.pageIndex = 1
            this.accpentlist = []
            this.getData()
        },
        add () {
            // 区分当前所处环境，方便本地调试
            if (this.isMiniprogram) {
                // 整合分享时候的参数
                wx.miniProgram.navigateTo({
                    url: `/pages/share/index?type=${this.$route.query.type}&deptId=${this.userInfo.departId}&deptName=${encodeURI(this.userInfo.departName)}`
                })
            } else {
                this.$router.push(`/addTrack?type=${this.$route.query.type}`)
            }
        }
    },
    created () {
        // 获取用户信息，判断是否有操作权限
        this.userInfo = JSON.parse(localStorage.getItem('registerInfo')) || {}
        let employeeType = this.$route.query.type
        this.params.deptid = this.userInfo.departId
        if (employeeType == 'glry') {
            this.params.employeeType = '管理人员'
        }
        if (employeeType == 'lwry') {
            this.params.employeeType = '劳务人员'
        }
        this.$axiosAjax.GetIsManager({
            userNo: this.userInfo.userId
        }).then(res => {
            if (res.status == 200) {
                if (res.data.code == 1) {
                    this.addPath = `/addTrack?type=${this.$route.query.type}`
                    this.isCanEdit = true
                } else {
                    this.addPath = ''
                    this.isCanEdit = false
                }
            }
        })
        this.$axiosAjax.GetYqzsNum({
            deptid: this.userInfo.departId,
            employeeType: this.params.employeeType
        }).then(res => {
            this.yqzsInfo = res.data
        })
    },
    mounted () {
        this.getData()
    }
}
</script>

<style lang="less" scoped>
    .retrospect {
        width: 100%;
        height: 100%;
        background-color: #EBEEF2;
        display: flex;
        flex-direction: column;
        .tips {
            width: 100%;
            position: fixed;
            left: 0;
            bottom: 0;
            text-align: center;
            background-color: #eae9e9;
            font-size: 14px;
            padding: 8px;
            z-index: 2;
        }
        .content {
            flex: 1;
            overflow: hidden;
            margin-top: 15px;
            .item {
                background-color: #fff;
                padding: 10px;
                height: 80px;
                overflow: hidden;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #f2f2f2;
                .left-content {
                    position: relative;
                    flex: 3;
                    font-size: 14px;
                    .head-img {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        border: 1px solid #eee;
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .head-info {
                        height: 100%;
                        position: absolute;
                        left: 50px;
                        top: 50%;
                        transform: translateY(-50%);
                        padding: 10px 0;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        h3 {
                            font-weight: bold;
                        }
                    }
                }
                .right-content {
                    font-size: 14px;
                    padding: 10px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .date {
                        color: #666;
                        padding-bottom: 5px;
                    }
                    .trace {
                        font-size: 12px;
                        color: #2269FC;
                        border: 1px solid #2269FC;
                        background-color: #DAE6FE;
                        height: 28px;
                        line-height: 28px;
                        text-align: center;
                        border-radius: 14px;
                    }
                }
            }
        }
    }
</style>